<script setup>
import { NAvatar, NButton, NCard, NGi, NGrid, NInput, useMessage, NInputGroup, NInputGroupLabel, NTag } from 'naive-ui'
import { onMounted, ref } from 'vue'
import { fetchModels, fetchSelf, resetpassword, fetchtoken,fetchGlobalStatus } from '@/api/index.ts'
import { ElMessage } from 'element-plus'

const UserInfo = ref({
    id: 4,
    username: 'jincm12',
    password: '',
    display_name: 'jincm12',
    role: 1,
    status: 1,
    email: '',
    github_id: '',
    oidc_id: '',
    wechat_id: '',
    telegram_id: '',
    verification_code: '',
    access_token: 'oNlmPOCxwBdog6V2SZ7bfH6/06dweSg=',
    quota: 99765591,
    used_quota: 234409,
    request_count: 39,
    group: 'default',
    aff_code: '3rrX',
    aff_count: 0,
    aff_quota: 0,
    aff_history_quota: 0,
    inviter_id: 0,
    DeletedAt: null,
    linux_do_id: '',
    setting: '',
})
const ModelsTabs = ref([])
const tokenKeys = ref([])
const fromData = ref({

})
const message = useMessage()
const grmlfoller= ref("")
onMounted(async () => {
    const data = await fetchSelf()
    UserInfo.value = data.data
    const model = await fetchModels()
    console.log(model)
    ModelsTabs.value = model.data
    let datatoken = await fetchtoken();
    console.log(datatoken.data)
    tokenKeys.value = datatoken.data
    let t= await fetchGlobalStatus()
    console.log(t.data.footer_html)
    grmlfoller.value = t.data.footer_html
})
async function restPassword() {
    console.log("restPassword")
    // 检测两次密码是否一致
    if (fromData.value.re_password !== fromData.value.ire_password) {
        message.error("两次密码输入的不一致")
    } else {
        let user = JSON.parse(window.localStorage.getItem("userStorage"))
        let data = await resetpassword({
            "password": fromData.value.re_password,
        })
        if (data.success) {
            message.success("修改完成")
        } else {
            message.error("修改密码失败,密码长度不足")
        }
        console.log(data)
    }
}

function handleInput(key, e) {
    fromData.value[key] = e;
}

</script>

<template>
    <div>
        <NCard title="" :segmented="{
            content: true,
            footer: 'soft',
            title: true,
        }">
            <template #header-extra>
                #header-extra
            </template>
            <!-- 用户信息模块 -->
            <div class="avatar">
                <div style="display: flex;">
                    <NAvatar round :style="{
                        color: '#FFF',
                        backgroundColor: 'rgb(213, 111, 15)',
                    }">
                        {{ UserInfo.username.substring(0, 1) }}
                    </NAvatar>
                    <div class="right">
                        <div style="padding-left: 0px;">
                            {{ UserInfo.username }}
                        </div>
                        <NTag type="info" size="small" style="font-size: 12px;">
                            普通用户
                        </NTag>
                    </div>
                </div>
                <div style="float: right;" class="rights">
                    
                    <div style="margin-top: 5px;">
                        <NTag type="info" size="small">
                            {{ UserInfo.group }}
                        </NTag>
                    </div>
                </div>
            </div>
            <!-- <div style="margin:15px 0;font-size: 18px;font-weight: bold;">基础信息</div> -->
            <NGrid x-gap="12" :cols="12">
                <NGi>
                    <div>当前余额</div>
                    <div>${{ (UserInfo.quota / 500000).toFixed(2) }}</div>
                </NGi>
                <NGi>
                    <div>历史消耗</div>
                    <div>${{ (UserInfo.used_quota / 500000).toFixed(2) }}</div>
                </NGi>
                <NGi>
                    <div>请求次数</div>
                    <div>{{ UserInfo.request_count }}</div>
                </NGi>
            </NGrid>
            <div>
                <div style="margin:15px 0;font-size: 18px;font-weight: bold;">
                    可用模型
                </div>
                <div>
                    <NTag v-for="(v, k) in ModelsTabs" :key="k" type="info" :style="{
                        marginRight: '5px',
                    }" size="small" style="font-size: 12px;">
                        {{ v }}
                    </NTag>
                </div>
            </div>
            <div>
                <div style="margin:15px 0;font-size: 18px;font-weight: bold;">
                    API令牌
                </div>
                <div>
                    <div v-for="(v, k) in tokenKeys"  :style="{
                            marginTop: '5px',
                        }"  :key="k">
                        <NTag type="info"size="small" style="font-size: 12px;">
                            {{ v.key }}
                        </NTag>
                    </div>

                </div>
            </div>
            <div>
                <div style="margin:15px 0;font-size: 18px;font-weight: bold;">
                    修改密码
                </div>
                <div style="width:30%">
                    <!-- <NInputGroup>
                        <NInputGroupLabel>原始密码:</NInputGroupLabel>
                        <NInput @input="handleInput('password', $event)" />
                    </NInputGroup> -->
                    <NInputGroup style="margin-top: 10px;">
                        <NInputGroupLabel>最新密码:</NInputGroupLabel>
                        <NInput type="password" @input="handleInput('re_password', $event)" />
                    </NInputGroup>
                    <NInputGroup style="margin-top: 10px;">
                        <NInputGroupLabel>确认密码:</NInputGroupLabel>
                        <NInput  type="password"  @input="handleInput('ire_password', $event)" />
                    </NInputGroup>
                    <NButton @click="restPassword" style="margin-top: 10px;">
                        确认修改
                    </NButton>
                </div>
            </div>
        </NCard>
        <p style="text-align:center">{{ grmlfoller }}</p>
    </div>
</template>

<style>
.avatar {
    display: flex;
    align-items: center;
    margin-bottom: 25px;
    border-bottom: 1px solid #ccd;
    padding-bottom: 20px;
    justify-content: space-between;
}

.right {
    padding-left: 15px;
    height: 50px;
}
</style>
